import { CONTEXT_MENU_CLASS_NAME } from '../config'
import { EPopVisible, EMenuItem } from '@/types'

interface ISetContextMenuOptions {
  left: string
  top: string
}

interface IMenuConfig {
  options: Array<EMenuItem>
}
export const useContextMenu = (menuConfig?: IMenuConfig) => {
  let target: HTMLElement | null = document.querySelector(`div.${CONTEXT_MENU_CLASS_NAME}`)
  if (!target) {
    target = document.createElement('div')
    target.className = CONTEXT_MENU_CLASS_NAME
    target.innerHTML = '<div>右键菜单</div>'
    document.body.appendChild(target)
  }

  const setContextMenu = (flag: EPopVisible, options?: Partial<ISetContextMenuOptions>) => {
    if (flag === 'show') {
      target.style.display = 'block'
      target.style.zIndex = '9999'
      if (options) {
        target.style.left = options?.left || '0px'
        target.style.top = options?.top || '0px'
      }
    } else {
      target.style.display = 'none'
    }
  }
  return {
    setContextMenu
  }
}
